<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="2"
          ><el-input size="mini" placeholder="楼宇名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="seach()"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 1%"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="账号" align="center">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.reviewName }}
        </template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.isOpen == 1 ? "正常" : "停用" }}
        </template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.review == 1 ? "通过" : "拒绝" }}
        </template>
      </el-table-column>

      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          {{ scope.row.accountType == 1 ? "内部人员" : "外部人员" }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="handleLease(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="where.pageIndex"
        :page-sizes="[10, 15, 20, 30, 40, 50]"
        :page-size="where.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
import {  getUserPageList } from "@/api/system";

export default {
  filters: {
    formatDate(value) {
      if (value) {
        return moment(value).format("YYYY-MM-DD");
      }
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      where: {
        pageIndex: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.fetchData(this.where);
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
      getUserPageList(obj).then((response) => {
        console.log(response);
        this.listLoading = false;
        this.list = response.data.data;
        this.total = response.data.total;
      });
    },
    seach() {
      this.fetchData(this.where);
    },
    handleLease() {
      console.log("handleLease");
      this.$router.push({ name: "LeaseRoom" });
    },
    handleSizeChange(val) {
      this.where.pageSize = val;
      this.fetchData(this.where);
    },
    handleCurrentChange(val) {
      this.where.pageIndex = val;
      this.fetchData(this.where);
    },
  },
};
</script>
  